<!--
 * @Author: wangming
 * @Date: 2021-05-19 09:56:05
 * @LastEditors: wangming
 * @LastEditTime: 2022-08-02 17:51:19
 * @Description: 模态框
-->
<template>
  <el-collapse value="0" accordion>
    <el-collapse-item title="页面结构" name="0">
      <tree></tree>
    </el-collapse-item>
    <el-collapse-item title="弹框" name="1" v-if="getNavName === 'home'">
      <template slot="title">
        <div class="ks-row-middle-between ks-col pr20">
          <span class="ks-col">模态框</span>
          <i class="el-icon-plus f22 iconcolor" @click.stop="add"></i>
          <i
            class="el-icon-document-add f20 iconcolor ml10"
            @click.stop="copyForm"
          ></i>
        </div>
      </template>
      <div
        :key="index"
        class="pr10 pane p5"
        v-for="(item, index) in getFormData.template"
      >
        <div class="ks-row-middle">
          <el-link type="primary" @click="editTemplate(item)">
            {{ item.name }}</el-link
          >
          <i
            @click="copyTem(item)"
            class="el-icon-copy-document iconcolor poi ml10"
          ></i>
        </div>
        <div class="ks-row-middle bbline">
          <div class="ks-row-middle mr10 ks-col">
            <span class="b mr10"> {{ item.key }}</span>
            <el-button
              type="text"
              @click="copy(item.key)"
              icon="el-icon-document-copy f16"
            ></el-button>
          </div>
          <i
            @click="show(item)"
            class="el-icon-view f16 mr10 iconcolor poi"
            v-if="item.formList.length > 0"
          ></i>
          <span
            class="iconfont iconbianji mr10 poi iconcolor"
            @click="edit(item)"
          ></span>
          <el-popconfirm
            :title="`确定删除<${item.name}>模态框吗？`"
            @confirm="getFormData.template.splice(index, 1)"
          >
            <span
              slot="reference"
              class="iconfont iconicon_shanchu poi iconcolor"
            ></span>
          </el-popconfirm>
        </div>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import tree from "./components/tree";
import ModelForm from "./components/addForm/index";
import copyForm from "./components/copyForm/index";
import { mapActions, mapGetters } from "vuex";
import Modal from "@/pageComponents/main/previewTemplate/index.js";
import { copy } from "@/utils/util";
import { cloneDeep } from "lodash";
import { desigconfig } from "@/pageConfig/index";
import { uuid } from "@/utils/common.js";
export default {
  components: { tree },
  computed: {
    ...mapGetters(["getFormData", "getNavName"]),
  },
  data() {
    return {};
  },
  methods: {
    ...mapActions(["setTemplateDate", "setNavName"]),
    tansformCopyForm(treeList) {
      return treeList.map((i) => {
        let { isFormLayout, key, children, tagName, __config } = i;
        let tag = desigconfig[tagName] || i;
        tag = cloneDeep(tag);
        if (isFormLayout !== undefined) {
          tag.isFormLayout = isFormLayout;
        }
        if (key !== undefined) {
          let [tagname, hash] = key.split("_");
          tag.key = tagname + "_" + uuid(hash.length);
        }
        if (__config?.label !== undefined) {
          tag.__config.label = __config.label;
        }
        if (children?.length > 0) {
          tag.children = this.tansformCopyForm(children);
        }
        return tag;
      });
    },
    copyForm() {
      copyForm.open().then((res) => {
        let formList = this.tansformCopyForm(res.formList);
        res.formList = formList;
        res.FormData.js = "";
        res.FormData.css = "";
        res.FormData.composer = [];
        let __rootKey = res.__rootKey || res.key;
        let flag = this.getFormData.template.every((i) => i.key !== __rootKey);
        if (flag) {
          res.key = __rootKey;
          this.getFormData.template.push(res);
          return;
        }
        let maxSuq = 1;
        let indexlist = this.getFormData.template.reduce((curr, row) => {
          if (__rootKey === row.__rootKey) {
            let tkey = row.key.match(/_(\d)$/)?.[1];
            !!tkey && curr.push(tkey);
          }
          return curr;
        }, []);
        if (!!indexlist.length) {
          maxSuq += Math.max(...indexlist);
        }
        let replaceKey = __rootKey + "_" + maxSuq;
        let text = JSON.stringify(res);
        let newtTem = JSON.parse(text.replaceAll(res.key, replaceKey));
        newtTem.__rootKey = __rootKey;
        this.getFormData.template.push(newtTem);
      });
    },
    copyTem(item) {
      copy(JSON.stringify(item));
    },
    copy,
    show({
      direction,
      FormData,
      name,
      formList,
      key,
      width,
      directionType,
      unit,
      closeOnModal,
      dialogDrag,
    }) {
      let instance = Modal.create(key);
      FormData.key = key;
      instance.showModel(
        {
          direction,
          width: `${width}${unit || "px"}`,
          formList,
          name: name,
          hmpageInfo: FormData,
          directionType,
          closeOnModal,
          dialogDrag,
        },
        () => {},
        () => {},
        this.getFormData.template
      );
    },
    editTemplate(value) {
      this.setTemplateDate(value);
      this.setNavName("template");
    },
    add() {
      ModelForm.addForm().then((res) => {
        this.getFormData.template.push(res);
      });
    },
    edit(form) {
      ModelForm.editForm(form).then((res) => {
        Object.assign(form, res);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.bbline {
  border-bottom: 1px solid #f9f0f0;
}
.pane:hover {
  background-color: #fbfcfd;
}
</style>
